语法：z-index:值；
1、 第一个定位元素会独占一层
2、 改变层级来改变定位元素堆叠顺序；
3、 数字越大，层级越高，层级默认值是0；
4、 当层级一样，后写元素会盖住先写元素，后来居上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.box{width:302px;height:302px;border:blue 1px solid;margin:50px auto;
position:relative;
}
.pst1,.pst2,.pst3{width:100px;height:100px;color:white;font-size:30px}
.pst1{background:orange;
position:absolute;
left:0;
top:0;
}
.pst2{background:green;
position:absolute;
left:50px;
top:50px;
}
.pst3{background:blue;
position:absolute;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="pst1">1</div>
<div class="pst2">2</div>
<div class="pst3">3</div>
</div>
</body>
</html>
返回值：
<style type="text/css">
.box{width:302px;height:302px;border:blue 1px solid;margin:50px auto;
position:relative;
}
.pst1,.pst2,.pst3{width:100px;height:100px;color:white;font-size:30px;
}
.pst1{background:orange;
position:absolute;
left:0;
top:0;
z-index:3
}
.pst2{background:green;
position:absolute;
left:50px;
top:50px;
z-index:2
}
.pst3{background:blue;
position:absolute;
left:100px;
top:100px;
z-index:1
}
</style>
返回值：
